<!-- 代理介绍 -->
<template>
    <!-- <n-modal v-model:show="showModal" :mask-closable="false"> -->
    <div class="record_page proxy_intro">


        <!-- Tab -->
        <!-- <n-flex class="tabs" align="center">
                <n-flex align="center" justify="center" class="tab">俱乐部</n-flex>
                <n-flex align="center" justify="center" class="tab active_tab">赌场</n-flex>
            </n-flex> -->

        <!-- 代理制度 -->
        <div class="subtitle">{{ t('proxy_page_copyZd') }}</div>
        <div class="table shadow_table">
            <n-flex class="tr th">
                <div class="td">{{ t('proxy_page_account') }}</div>
                <div class="td">{{ t('proxy_page_zsCommission') }}</div>
            </n-flex>
            <n-flex class="tr" v-for="(item, i) in proxyConfig" :key="i">
                <div class="td">{{ item.name }}</div>
                <div class="td td_money">{{ item.value }}</div>
            </n-flex>
        </div>

        <!-- 代理层级 -->
        <div class="subtitle" style="position: relative;top: 50px;">{{ t('proxy_page_agentCj') }}</div>
        <n-flex vertical class="level_box">

            <!-- Boss -->
            <n-flex vertical class="icon_box" :align="'center'">
                <img style="width:37px" class="icon" src="/img/proxy/level_1.webp" alt="BOSS">
                <div class="name">BOSS</div>
            </n-flex>
            <n-flex class="model_box_content">
                <n-flex class="item " style="width:100%">
                    <span class="item_title">{{ t('proxy_page_team') }}：</span>
                    <span>{{ t('proxy_page_turnover') }} 300w*0.125% (1.5%~1.375%) =3750</span>
                </n-flex>
                <n-flex class="item item_margin">
                    <span class="item_title">{{ t('proxy_page_contributions') }}：</span>
                    <span>15000
                        {{ t('proxy_page_revenue') }}={{ t('proxy_page_team') }}+{{ t('proxy_page_contributions')
                        }}=18750</span>
                </n-flex>
                <!-- <n-flex class="item item_3">
                        <span class="item_title">团队总业绩：</span>
                        <span>800万</span>
                    </n-flex>
                    <n-flex class="item item_3">
                        <span class="item_title">团队分红：</span>
                        <span>10000</span>
                    </n-flex>
                    <n-flex class="item item_3">
                        <span class="item_title">直属总业绩：</span>
                        <span>60万</span>
                    </n-flex>
                    <n-flex class="item item_3 item_margin">
                        <span class="item_title">直属分红：</span>
                        <span>9000</span>
                    </n-flex>
                    <n-flex class="item item_3 item_margin">
                        <span class="item_title">两队总佣金：</span>
                        <span>19000</span>
                    </n-flex>
                    <n-flex class="item item_3">&nbsp;</n-flex>
                    <n-flex class="item item_3">
                        <span>团队分红=总业绩800万 ✖️ 差额0.125%</span>
                    </n-flex>
                    <n-flex class="item item_3">
                        <span>直属分红=60万 ✖️ 1.5%</span>
                    </n-flex> -->
            </n-flex>

            <!-- 树状结构1 -->
            <div class="tree">
                <div class="line_box"></div>
                <div class="text_box">{{ t('proxy_page_nextCs') }} 0.125% {{ t('proxy_page_nextZs') }}</div>
                <n-flex class="icons_box" justify="space-between" align="stretch">
                    <n-flex vertical class="icon_box" style="transform: translateX(-50%)" :align="'center'">
                        <img style="width:30px" class="icon" src="/img/proxy/level_2.webp" alt="BOSS">
                        <div class="name">{{ t('proxy_page_partner') }} B1</div>
                    </n-flex>
                    <n-flex vertical class="icon_box" style="transform: translateX(50%)" :align="'center'">
                        <img style="width:30px" class="icon" src="/img/proxy/level_2.webp" alt="BOSS">
                        <div class="name">B2 {{ t('proxy_page_player') }}</div>
                    </n-flex>
                </n-flex>
            </div>

            <!-- 合伙人 -->
            <n-flex justify="space-between" align="stretch">
                <n-flex vertical class="model_box_content content_2">
                    <n-flex class="item item_margin" style="justify-content:center">
                        <span class="item_title">{{ t('proxy_page_winLose') }}：</span>
                        <span>100 {{ t('proxy_page_wan') }}</span>
                    </n-flex>
                    <!-- <n-flex class="item">
                            <span class="item_title">团队总业绩：</span>
                            <span>800万</span>
                        </n-flex>
                        <n-flex class="item item_margin">
                            <span class="item_title">A1有效投注：</span>
                            <span>50万</span>
                        </n-flex>
                        <n-flex class="item">
                            <span class="item_title">直属下级业绩：</span>
                            <span>50万</span>
                        </n-flex> -->
                </n-flex>
                <n-flex vertical class="model_box_content content_2">
                    <n-flex class="item item_margin" style="justify-content:center">
                        <span class="item_title">{{ t('proxy_page_winLose') }}：</span>
                        <span>100 {{ t('proxy_page_wan') }}</span>
                    </n-flex>
                    <!-- <n-flex class="item">
                            <span class="item_title">团队总业绩：</span>
                            <span>800万</span>
                        </n-flex>
                        <n-flex class="item item_margin">
                            <span class="item_title">A1有效投注：</span>
                            <span>50万</span>
                        </n-flex>
                        <n-flex class="item">
                            <span class="item_title">直属下级业绩：</span>
                            <span>50万</span>
                        </n-flex> -->
                </n-flex>
            </n-flex>

            <!-- 树状结构2 -->
            <n-flex justify="space-between" align="stretch">
                <div class="tree" style="width:25%">
                    <div class="line_box"></div>
                    <div class="text_box">{{ t('proxy_page_nextCs') }}0.125%+<br />{{ t('proxy_page_nextZs') }}
                    </div>
                    <n-flex class="icons_box" justify="space-between" align="stretch">
                        <n-flex vertical class="icon_box" style="transform: translateX(-50%)" :align="'center'">
                            <img style="width:34px" class="icon" src="/img/proxy/level_3.webp" alt="BOSS">
                            <div class="name">{{ t('proxy_page_gjMaster') }} C1</div>
                        </n-flex>
                        <n-flex vertical class="icon_box" style="transform: translateX(50%)" :align="'center'">
                            <img style="width:34px" class="icon" src="/img/proxy/level_3.webp" alt="BOSS">
                            <div class="name">{{ t('proxy_page_gjPlayer') }} C2</div>
                        </n-flex>
                    </n-flex>
                </div>
                <div class="tree" style="width:25%"></div>
                <!-- <div class="tree" style="width:25%">
                        <div class="line_box"></div>
                        <div class="text_box">下级总业绩0.125%+<br />直属下级业绩的有效流水抽成</div>
                        <n-flex class="icons_box" justify="space-between" align="stretch">
                            <n-flex vertical class="icon_box" style="transform: translateX(-50%)" :align="'center'">
                                <img style="width:34px" class="icon" src="/img/proxy/level_3.webp" alt="BOSS">
                                <div class="name">高级厅主B3</div>
                            </n-flex>
                            <n-flex vertical class="icon_box" style="transform: translateX(50%)" :align="'center'">
                                <img style="width:34px" class="icon" src="/img/proxy/level_3.webp" alt="BOSS">
                                <div class="name">高级厅主B4</div>
                            </n-flex>
                        </n-flex>
                    </div> -->
            </n-flex>

            <!-- 高级厅主 -->
            <n-flex justify="space-between" align="stretch">
                <n-flex vertical class="model_box_content content_4">
                    <n-flex class="item">
                        <span class="item_title">{{ t('proxy_page_winLose') }}：</span>
                        <span>100 {{ t('proxy_page_wan') }}</span>
                    </n-flex>
                    <!-- <n-flex class="item">
                            <span class="item_title">团队总业绩：</span>
                            <span>800万</span>
                        </n-flex>
                        <n-flex class="item item_margin">
                            <span class="item_title">A1有效投注：</span>
                            <span>50万</span>
                        </n-flex>
                        <n-flex class="item">
                            <span class="item_title">直属下级业绩：</span>
                            <span>50万</span>
                        </n-flex> -->
                </n-flex>
                <n-flex vertical class="model_box_content content_4">
                    <n-flex class="item">
                        <span class="item_title">{{ t('proxy_page_winLose') }}：</span>
                        <span>100 {{ t('proxy_page_wan') }}</span>
                    </n-flex>
                    <!-- <n-flex class="item">
                            <span class="item_title">团队总业绩：</span>
                            <span>800万</span>
                        </n-flex>
                        <n-flex class="item item_margin">
                            <span class="item_title">A1有效投注：</span>
                            <span>50万</span>
                        </n-flex>
                        <n-flex class="item">
                            <span class="item_title">直属下级业绩：</span>
                            <span>50万</span>
                        </n-flex> -->
                </n-flex>
                <n-flex vertical class="model_box_content content_4" style="opacity: 0;">&nbsp;</n-flex>
                <n-flex vertical class="model_box_content content_4" style="opacity: 0;">&nbsp;</n-flex>
                <!-- <n-flex vertical class="model_box_content content_4">
                        <n-flex class="item">
                            <span class="item_title">团队总业绩：</span>
                            <span>800万</span>
                        </n-flex>
                        <n-flex class="item item_margin">
                            <span class="item_title">A1有效投注：</span>
                            <span>50万</span>
                        </n-flex>
                        <n-flex class="item">
                            <span class="item_title">直属下级业绩：</span>
                            <span>50万</span>
                        </n-flex>
                    </n-flex>
                    <n-flex vertical class="model_box_content content_4">
                        <n-flex class="item">
                            <span class="item_title">团队总业绩：</span>
                            <span>800万</span>
                        </n-flex>
                        <n-flex class="item item_margin">
                            <span class="item_title">A1有效投注：</span>
                            <span>50万</span>
                        </n-flex>
                        <n-flex class="item">
                            <span class="item_title">直属下级业绩：</span>
                            <span>50万</span>
                        </n-flex>
                    </n-flex> -->
            </n-flex>
        </n-flex>

        <!-- 详细介绍 -->
        <!-- <div class="subtitle">详细介绍</div>
            <div class="table shadow_table">
                <n-flex class="tr th">
                    <div class="td">类型</div>
                    <div class="td td_25">计算计算方式</div>
                </n-flex>
                <n-flex class="tr" v-for="(item, i) in proxyCalc" :key="i">
                    <div class="td">{{ item.name }}</div>
                    <div class="td td_25">{{ item.value }}</div>
                </n-flex>
                <n-flex class="tr">
                    <div class="td">有效投注</div>
                    <div class="td td_25">
                        例如德州扑克的一局游戏中只计算每轮的有效跟注，例如大盲位遇到对手全弃牌，只计算双方的有效跟注，因为该对局只有小盲位跟半BAT，所以大盲位的有效投注也只有半BET，而不是盲注的1BET。
                        <br /><br />再举一个例子，当德州扑克一局中，某位玩家全押，对手全弃牌时，只计算双方之间的有效跟注，假设全押者的上家押注300U，而全押者全押1000U，对手全弃牌，则只计算全押者300U的有效跟注。
                    </div>
                </n-flex>
            </div> -->

        <div class="intro">
            <div class="title">详细介绍</div>
            <div class="subtitle">举例说明如下：</div>
            <div class="content">俱乐部返点以有效流水为依据，boss最先发现商机，发展了b1和b2，b1向boss申请成为合伙人，b1又马上发展c1和c2 c1向合伙人b1申请成为高级厅主
                <div class="br"></div>
                几天后合伙人b1有效流水100w b2有效流水也是100w c1有效流水100w c2有效流水也是100w
            </div>
            <div class="subtitle">直属玩家：</div>
            <div class="content">b2是boss的直属玩家<div class="br"></div>c2是合伙人b1的直属玩家</div>
            <div class="subtitle">下级代理：</div>
            <div class="content">合伙人b1是boss的下级代理<div class="br"></div>高级厅主c1是b1的下级代理<div class="br"></div>
                高级厅主c1是boss的下下级代理</div>
            <div class="subtitle">那么他们之间的收益如下:</div>
            <div class="content">boss直属玩家贡献1.000.000*0.65%=
                6500vnd<div class="br"></div>boss下级代理b1+c1+c2贡献（100w+100w+100w）*0.125%（0.65%-0.525%）=3750vnd<div
                    class="br"></div>boss返水=boss直属玩家贡献+下级代理贡献=6500+3750=10250vnd
            </div>
        </div>
    </div>
    <!-- </n-modal> -->
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useI18n } from "vue-i18n";
// import { useRouter } from 'vue-router';

// const router = useRouter();

const { t } = useI18n()
// const showModal = ref(false)
// const openModal = () => { // 打开
//     showModal.value = true
// }
// const closeModal = () => { // 关闭
//     showModal.value = false
// }


const proxyConfig = ref([
    { name: t('proxy_page_jxMaster'), value: "0.15%" },
    { name: t('proxy_page_master'), value: "0.275%" },
    { name: t('proxy_page_gjMaster'), value: "0.4%" },
    { name: t('proxy_page_partner'), value: "0.525%" },
    { name: "BOSS", value: "0.65%" },
])
// const proxyCalc = ref([
//     { name: "团队分红", value: "总业绩1000万×每层差额0.125%" },
//     { name: "直属分红", value: "直属业绩×团队有效流水抽成" },
//     { name: "BOSS总业绩", value: "合伙人业绩总和+直属下级业绩" },
//     { name: "合伙人总业绩", value: "高级厅主业绩总和+直属下级业绩" },
//     { name: "高级厅主总业绩", value: "厅主业绩总和+直属下级业绩" },
//     { name: "厅主总业绩", value: "见习厅主业绩总和+直属下级业绩" },
//     { name: "见习业绩", value: "直属有效投注" },
//     { name: "自身有效投注", value: "上级的直属下级有效投注" },
//     { name: "业绩", value: "有效投注的别称" },
// ])

// defineExpose({
//     openModal
// })
</script>

<style lang='less' scoped>
@import '@/assets/recordPage.less';
@import '@/assets/modelBox.less';

.proxy_intro {
    width: 1200px;
    box-sizing: border-box;
    font-size: 14px;
    min-height: 1200px;
    user-select: none;

    .intro {


        .title {
            font-size: 12px;
            font-weight: 400;
            color: #A2A5DE;
            margin: 20px 0 10px 0;
        }

        .subtitle {
            color: #FFFFFF;
            margin-bottom: 10px;
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
        }

        .content {
            color: #FFFFFF;
            padding-left: 24px;
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;

            .br {
                margin-bottom: 10px;
            }
        }
    }

    .table {
        .th {
            .td {
                color: #fff;
            }
        }

        .tr {
            color: #8E82C2;
        }

        .tr:nth-child(odd) {
            color: #fff;
        }
    }

    .model_box_content {
        border-radius: 12px;
        background-color: #1D0E4A;
        border: 1px solid #322C59;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.4) inset;
        padding: 25px 30px;
    }



    .subtitle {
        font-size: 16px;
        margin: 20px 0;
        color: #fff
    }

    .tabs {
        margin-top: 20px;
        border-radius: 14px;
        box-sizing: border-box;
        height: 72px;
        background: linear-gradient(0deg, #1D0E4A, #1D0E4A),
            radial-gradient(50% 50% at 50% 50%, rgba(126, 126, 126, 0.1) 0%, rgba(21, 21, 21, 0.1) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.1) 100%);
        border: 1.4px solid #322C59;
        box-shadow: 0px 4px 4px 0px #00000040 inset;

        .tab {
            padding: 10px;
            flex: 1;
            color: #8D81C1;
            font-size: 16px;
            height: 52px;
            cursor: pointer;
        }

        .active_tab {
            background: url(/img/wallet/tabBtnBG.webp) no-repeat;
            background-size: 100% 112%;
            color: #fff;
        }
    }

    .level_box {
        .icon_box {
            height: 57px;
            position: relative;

            .icon {
                height: 30px;
                object-fit: contain;
            }

            .name {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                white-space: nowrap;
                color: #fff
            }
        }

        .content_2 {
            width: 555px;
        }

        .content_4 {
            width: 264px;
        }

        .item {
            font-size: 16px;
            color: #fff;
            line-height: 16px;

            .item_title {
                color: #8E82C2;
                font-weight: 400;
            }
        }

        .item_3 {
            width: 30%;
        }

        .item_margin {
            margin: 20px 0;
        }

        .tree {
            width: 50%;
            position: relative;
            padding-top: 20px;
            margin: 0 auto;

            .text_box {
                position: absolute;
                width: 75%;
                left: 50%;
                transform: translateX(-50%);
                top: 0;
                text-align: center;
                top: 40px;
                color: #8D81C1;
            }

            .line_box {
                width: 100%;
                height: 20px;
                border: 1px solid #fff;
                border-bottom: none;
                position: relative;
                margin-bottom: 12px;

                &::after {
                    content: "";
                    width: 1px;
                    height: 20px;
                    position: absolute;
                    top: -20px;
                    left: 50%;
                    background-color: #fff;
                    transform: translateX(-50%);
                }
            }
        }
    }
}
</style>
